﻿<local:TileImageBase x:Class="EmperialApps.WeatherSpark.Agent.TileFlipImage"
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:local="clr-namespace:EmperialApps.WeatherSpark.Agent"
                     Height="360"
                     Width="360"
                     FontFamily="Segoe WP">
    <Grid x:Name="ForecastPanel">
        <Grid.RowDefinitions>
            <RowDefinition Height="24" />
            <RowDefinition x:Name="PrecipitationRow"
                           Height="72" />
            <RowDefinition Height="10" />
            <RowDefinition x:Name="CloudCoverRow"
                           Height="72" />
            <RowDefinition Height="10" />
            <RowDefinition x:Name="WindRow"
                           Height="72" />
            <RowDefinition Height="12" />
            <RowDefinition Height="40" />
            <RowDefinition Height="24" />
            <RowDefinition Height="24" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="12" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="6" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="3" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="12" />
            <ColumnDefinition x:Name="TraceColumn"
                              Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.Resources>
            <Style x:Key="ValueLabel"
                   TargetType="TextBlock">
                <Setter Property="Margin"
                        Value="0,-6,0,0" />
                <Setter Property="HorizontalAlignment"
                        Value="Center" />
                <Setter Property="VerticalAlignment"
                        Value="Center" />
                <Setter Property="FontSize"
                        Value="38" />
                <Setter Property="Foreground"
                        Value="Black" />
                <Setter Property="UseLayoutRounding"
                        Value="True" />
            </Style>
        </Grid.Resources>

        <Grid Grid.Column="7"
              Grid.Row="1"
              Grid.RowSpan="5"
              Margin="-0.5,0">
            <Rectangle x:Name="NightBackground"
                       Fill="#80333333">
                <Rectangle.Clip>
                    <PathGeometry />
                </Rectangle.Clip>
            </Rectangle>

            <Line x:Name="MidnightLine"
                  Stroke="#80000000" />
        </Grid>

        <Grid Grid.Column="7"
              Grid.Row="1"
              Grid.RowSpan="6">
            <Polyline x:Name="PrecipitationTrace"
                      Stroke="White"
                      StrokeThickness="4" />
            <Polyline x:Name="CloudCoverTrace"
                      Stroke="White"
                      StrokeThickness="4" />
            <Polyline x:Name="WindSpeedTrace"
                      Stroke="White"
                      StrokeThickness="4" />

            <Line x:Name="CurrentTimeMarkers"
                  Stroke="Black"
                  StrokeThickness="10"
                  StrokeEndLineCap="Flat"
                  StrokeStartLineCap="Flat"
                  X2="6" />
        </Grid>

        <!-- Precipitation -->
        <Path Grid.Column="1"
              Grid.Row="1"
              Data="M 6.8,0.0  C 6.4,1.6 4.0,4.6 2.9,6.0  C 1.8,7.4 0.0,9.6 0.0,12.4  C 0.0,16.6 2.7,19.8 6.8,19.8  C 10.9,19.8 13.6,16.6 13.6,12.4  C 13.6,9.6 11.8,7.4 10.7,6.0  C 9.6,4.6 7.3,1.6 6.8,0.0  z"
              Margin="0,22"
              Fill="Black"
              Stretch="Uniform" />

        <TextBlock x:Name="CurrentPrecipitationLabel"
                   Style="{StaticResource ValueLabel}"
                   Grid.Row="1"
                   Grid.Column="3"
                   HorizontalAlignment="Right"
                   Text="100" />
        <TextBlock Style="{StaticResource ValueLabel}"
                   Grid.Row="1"
                   Grid.Column="5"
                   Margin="0,-16,0,0"
                   FontSize="24"
                   Text="%" />

        <Ellipse x:Name="CurrentPrecipitationTimeMarker"
                 Grid.Column="7"
                 Grid.Row="1"
                 Height="12"
                 Margin="-6"
                 Width="12"
                 Fill="Black"
                 HorizontalAlignment="Left"
                 VerticalAlignment="Top">
            <Ellipse.RenderTransform>
                <TranslateTransform />
            </Ellipse.RenderTransform>
        </Ellipse>

        <!-- Cloud Cover -->
        <Path Grid.Column="1"
              Grid.Row="3"
              Data="M 4.0,20.5  C 1.8,20.5 0.0,18.8 0.0,16.6  C 0.0,14.7 1.4,13.1 3.2,12.7  C 3.2,12.5 3.2,12.2 3.2,11.9  C 3.2,8.9 5.5,6.5 8.5,6.3  C 9.8,2.6 13.3,0.0 17.4,0.0  C 21.3,0.0 24.7,2.4 26.2,5.8  C 27.3,5.1 28.7,4.8 30.1,4.8  C 34.5,4.8 38.0,8.3 38.0,12.7  C 38.0,17.0 34.4,20.5 30.0,20.5  z"
              Margin="0,28"
              Fill="Black"
              Stretch="Uniform" />

        <TextBlock x:Name="CurrentCloudCoverLabel"
                   Style="{StaticResource ValueLabel}"
                   Grid.Column="3"
                   Grid.Row="3"
                   HorizontalAlignment="Right"
                   Text="100" />
        <TextBlock Style="{StaticResource ValueLabel}"
                   Grid.Row="3"
                   Grid.Column="5"
                   Margin="0,-16,0,0"
                   FontSize="24"
                   Text="%" />

        <Ellipse x:Name="CurrentCloudCoverTimeMarker"
                 Grid.Column="7"
                 Grid.Row="3"
                 Height="12"
                 Margin="-6"
                 Width="12"
                 Fill="Black"
                 HorizontalAlignment="Left"
                 VerticalAlignment="Top">
            <Ellipse.RenderTransform>
                <TranslateTransform />
            </Ellipse.RenderTransform>
        </Ellipse>

        <!-- Wind Speed -->
        <Path Grid.Column="1"
              Grid.Row="5"
              Margin="0,24"
              Data="M 0.0,5.0 L 9.0,5.0 A 2.0,2.0 0 1 0 7.0,2.5  M 0.0,8.0 L 15.5,8.0 A 2.6,2.6 0 1 0 14.0,3.5  M 0.0,11.0 L 12.5,11.0 A 2.2,2.2 0 1 1 10.5,14.0  M 0.0,15.5 z"
              Stroke="Black"
              StrokeEndLineCap="Round"
              StrokeThickness="1.5"
              Stretch="Uniform"
              UseLayoutRounding="True" />

        <TextBlock x:Name="CurrentWindSpeedLabel"
                   Style="{StaticResource ValueLabel}"
                   Grid.Column="3"
                   Grid.Row="5"
                   HorizontalAlignment="Right"
                   Text="100" />
        <Grid Grid.Row="5"
              Grid.Column="5"
              HorizontalAlignment="Center"
              VerticalAlignment="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="1" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <TextBlock x:Name="CurrentWindSpeedUnitNumerator"
                       Style="{StaticResource ValueLabel}"
                       Grid.Row="0"
                       HorizontalAlignment="Center"
                       Text="m"
                       FontSize="19" />
            <Rectangle Grid.Row="1"
                       Fill="Black" />
            <TextBlock x:Name="CurrentWindSpeedUnitDenominator"
                       Style="{StaticResource ValueLabel}"
                       Grid.Row="2"
                       HorizontalAlignment="Center"
                       Text="s"
                       FontSize="19" />
        </Grid>

        <Ellipse x:Name="CurrentWindSpeedTimeMarker"
                 Grid.Column="7"
                 Grid.Row="5"
                 Height="12"
                 Margin="-6"
                 Width="12"
                 Fill="Black"
                 HorizontalAlignment="Left"
                 VerticalAlignment="Top">
            <Ellipse.RenderTransform>
                <TranslateTransform />
            </Ellipse.RenderTransform>
        </Ellipse>

        <TextBlock x:Name="CurrentTimeLabel"
                   Grid.Column="7"
                   Grid.Row="7"
                   VerticalAlignment="Top"
                   FontSize="30"
                   FontWeight="Light"
                   Foreground="Black"
                   UseLayoutRounding="True"
                   Text="12p" />

        <Grid.Background>
            <ImageBrush x:Name="BackgroundImage" />
        </Grid.Background>
    </Grid>
</local:TileImageBase>
